@import "../../../style/index.less";

@tab_color: @color_cancel;
@bg_color: @color_info_200;
@color_font: @color_font_700;
@chart_bg_color: @color_info_100;
@color_port_name: @color_warning;
.halo-com-line-chart {
  .tabs_sm {
    margin-top: 20px;
    height: 24px;
    .btn {
      margin-left: 3%;
    }
    .tabs-mini {
      background-color: #fff;
      float: right;
      margin: -4px 3% 0 0;
      .tab {
        background-color: @tab_color;
        margin-right: 1px;
        &:hover {
          background-color: @bg_color;
        }
      }
      .selected  {
        background-color: @bg_color;
      }
    }
  }
  .chart {
    position: relative;
    width: 95%;
    height: 300px;
    margin: 20px auto;
    background-color: @chart_bg_color;
    .legendWp {
      position: absolute;
      width: 40%;
      top: 50%;
      left: 40%;
      color: @color_font;
    }
    .no-monitor-data {
      display: block;
      vertical-align: middle;
      text-align: center;
      line-height: 300px;
    }
  }
  .detail-loading {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: visible;
  }
  .port-name {
    margin-left: 22px;
    font-size: 20px;
    font-weight: bold;
    color: @color_port_name;
  }
}